<script setup>
import { ref, reactive } from "vue";
import { myCoursesApi } from "@/api/courses";
import { ElMessage } from "element-plus";

const formInline = reactive({
  date: "",
});
const shortcuts = [
  {
    text: "近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "近一个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "近三个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
const courses = ref([]);
const getCourses = async () => {
  const params = {
    ...pageInfo,
    start_time: formInline.date?.[0],
    end_time: formInline.date?.[1],
  };
  const res = await myCoursesApi(params);
  if (res.data.status === 200) {
    courses.value = res.data.data;
    pageInfo.total = res.data.meta.total;
  } else {
    ElMessage.error(res.data.message);
  }
};
const activeName = ref(null);
const pageInfo = reactive({ page: 1, per_page: 12, total: 0 });
getCourses();
</script>
<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      label-width="100px"
      class="form-inline"
    >
      <el-form-item label="时间范围">
        <el-date-picker
          v-model="formInline.date"
          type="daterange"
          unlink-panels
          :editable="false"
          range-separator="-"
          start-placeholder="起始时间"
          end-placeholder="截止时间"
          :shortcuts="shortcuts"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getCourses">查询</el-button>
        <el-button @click="resetForm(formRef)">重置</el-button>
      </el-form-item>
    </el-form>
    <el-collapse v-model="activeName">
      <el-collapse-item
        v-for="(item, index) in courses"
        :key="item.id"
        :title="`${index + 1}. ${item.course_name}`"
        :name="item.id"
      >
        <el-descriptions title="">
          <el-descriptions-item label="姓名">{{
            item.student_name
          }}</el-descriptions-item>
          <el-descriptions-item label="电话">{{
            item.phone_number
          }}</el-descriptions-item>
          <el-descriptions-item label="申请时间">
            {{ item.apply_time }}
          </el-descriptions-item>
          <el-descriptions-item label="上课时间">
            <el-tag size="small">2025-01-04 10:30</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="上课地点"
            >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
            Province</el-descriptions-item
          >
        </el-descriptions>
      </el-collapse-item>
    </el-collapse>
    <div class="pagination d-flex justify-content-center mt-4">
      <el-pagination
        :teleported="false"
        background
        v-model:current-page="pageInfo.page"
        v-model:page-size="pageInfo.per_page"
        :page-sizes="[12, 16, 20]"
        :total="pageInfo.total"
        layout="prev, pager, next, sizes"
        @size-change="getCourses()"
        @current-change="getCourses()"
      />
    </div>
  </div>
</template>

<style>
.form-inline .el-input {
  --el-input-width: 220px;
}
</style>
